<template>
  <div class="cart">
    <item-view :cartList="cartList" v-if="cartList.length > 0" />
    <div v-else class="nogood">
      <p><img src="/public//cart.png" /></p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import itemView from './item.vue'
import { useCartStore } from '@/stores/cart'

const cartStore = useCartStore()
const cartList = ref([])

onMounted(async () => {
  await cartStore.fetchCartList()
  cartList.value = cartStore.cartList
})
</script>

<style scoped>
.cart {
  width: 100%;
}
.nogood {
  width: 100%;
  height: 1000px;
  background-color: #f2f2f2;
}
p {
  text-align: center;
}
</style>
